<template>
  <!-- 外部主体盒子 -->
  <view class="maxView" @tap="jumpRouterView">
    <view class="mainView">
      <!-- 头部 -->
      <template v-if="injectData.headContent">
        <view class="headView">
          <view class="headLeft">
            <h1 class="main">
              {{ injectData.headContent.main }}
            </h1>
            <text class="desc">
              {{ injectData.headContent.desc }}
            </text>
            <template v-if="injectData.headContent.icon">
              <image
                :src="injectData.headContent.icon"
                mode="scaleToFill"
                :style="{ width: '10px', height: '10px' }"
                class="iconView"
              />
            </template>
          </view>
          <text
            :style="{
              color: injectData.headContent.status.color
                ? injectData.headContent.status.color
                : 'black',
            }"
            class="status"
          >
            {{
              injectData.headContent.status.content
                ? injectData.headContent.status.content
                : ""
            }}
          </text>
        </view>
      </template>
      <!-- 内容的循环 -->
      <view class="contentCycle">
        <template v-for="(item, index) in injectData.bodyContent" :key="index">
          <view class="contentItem">
            <view class="contentTitle">
              {{ item.main }}
            </view>
            <view
              class="contentFont"
              :style="{ color: item.color ? item.color : '#666666' }"
            >
              {{ item.desc }}
            </view>
          </view>
        </template>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
// props
import { itemList } from "@/tmui/components/tm-drag-list/interface";
import { color } from "echarts";
import { defineProps, defineEmits, withDefaults, onMounted } from "vue";
const props = withDefaults(
  defineProps<{
    injectData: propsType;
    // 跳转到哪里去
    jumpUrl?: string;
    // 跳转的类型  是否可以跳转
    isTap?: boolean;
  }>(),
  {}
);
const emit = defineEmits(["click", "tap"]);

/**@description  传输数据的props */
export interface propsType {
  headContent?: {
    main: string;
    desc: string;
    icon: string;
    status: {
      content: string;
      color: string;
    };
  };
  bodyContent: {
    main: string;
    desc: string;
    color?: string;
  }[];
  residentId?: string;
}
// 组件渲染的时候注册
onMounted(() => {
  // console.log("组件渲染的时候注册")
  // emit("tap", () => {
  // })
});
/**@methods */
const jumpRouterView = () => {
  if (props.jumpUrl) {
    uni.navigateTo({
      url: props.jumpUrl,
    });
  } else {
    return;
  }
};
</script>

<style lang="scss" scoped>
@import "./index";
</style>
